<!DOCTYPE html>
<html>
<head>
    <title>Cylindrical Shell Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: white;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="350"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // General styling for a hand-drawn look
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2.5;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // --- Cylinder Parameters ---
        const c_x = 120; // x-coordinate of the center of the left cap
        const c_y = 150; // y-coordinate of the central axis
        const c_l = 250; // length of the cylinder
        const c_r = 50;  // radius of the cylinder
        const c_p = 20;  // perspective radius (for the ellipse)
        const c_x_end = c_x + c_l;

        // --- Draw Cylinder ---
        // Left cap (ellipse for perspective)
        ctx.beginPath();
        ctx.ellipse(c_x, c_y, c_p, c_r, Math.PI / 2, 0, 2 * Math.PI);
        ctx.stroke();

        // Cylinder body and right cap
        ctx.beginPath();
        ctx.moveTo(c_x, c_y - c_r);
        ctx.lineTo(c_x_end, c_y - c_r);
        ctx.arc(c_x_end, c_y, c_r, -Math.PI / 2, Math.PI / 2);
        ctx.lineTo(c_x, c_y + c_r);
        ctx.stroke();

        // --- Draw Central Axis (z-axis) ---
        const axis_start_x = 40;
        const axis_end_x = 440;
        
        ctx.save(); // Save context state before changing line dash
        ctx.setLineDash([7, 7]);
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.moveTo(axis_start_x, c_y);
        ctx.lineTo(axis_end_x, c_y);
        ctx.stroke();
        ctx.restore(); // Restore to solid lines

        // Arrowhead for z-axis
        ctx.beginPath();
        ctx.moveTo(axis_end_x, c_y);
        ctx.lineTo(axis_end_x - 12, c_y - 6);
        ctx.moveTo(axis_end_x, c_y);
        ctx.lineTo(axis_end_x - 12, c_y + 6);
        ctx.stroke();
        
        // Label 'z'
        ctx.font = 'italic bold 22px serif';
        ctx.fillText('z', axis_end_x + 18, c_y);

        // --- Draw Dimensions ---
        ctx.font = 'italic 22px serif';

        // Radius dimension 'a'
        const dim_a_x = 80;
        ctx.beginPath();
        ctx.moveTo(dim_a_x, c_y - c_r);
        ctx.lineTo(dim_a_x, c_y);
        // Ticks
        ctx.moveTo(dim_a_x - 5, c_y - c_r);
        ctx.lineTo(dim_a_x + 5, c_y - c_r);
        ctx.moveTo(dim_a_x - 5, c_y);
        ctx.lineTo(dim_a_x + 5, c_y);
        ctx.stroke();
        // Label 'a'
        ctx.fillText('a', dim_a_x - 20, c_y - c_r / 2);

        // Length dimension 'l'
        const dim_l_y = 240;
        ctx.beginPath();
        ctx.moveTo(c_x, dim_l_y);
        ctx.lineTo(c_x_end, dim_l_y);
        // Ticks
        ctx.moveTo(c_x, dim_l_y - 5);
        ctx.lineTo(c_x, dim_l_y + 5);
        ctx.moveTo(c_x_end, dim_l_y - 5);
        ctx.lineTo(c_x_end, dim_l_y + 5);
        ctx.stroke();
        // Label 'l'
        ctx.fillText('l', (c_x + c_x_end) / 2, dim_l_y + 20);

        // --- Draw Rotation Indicator ---
        const omega_x = c_x_end + 35;
        const omega_r = 18;
        
        // Arc for rotation
        ctx.beginPath();
        ctx.arc(omega_x, c_y, omega_r, Math.PI * 0.7, Math.PI * 1.5);
        ctx.stroke();
        
        // Arrowhead for rotation (simple, manual)
        const ah_x = omega_x + omega_r * Math.cos(Math.PI * 0.7);
        const ah_y = c_y + omega_r * Math.sin(Math.PI * 0.7);
        ctx.beginPath();
        ctx.moveTo(ah_x, ah_y);
        ctx.lineTo(ah_x - 7, ah_y - 4);
        ctx.moveTo(ah_x, ah_y);
        ctx.lineTo(ah_x + 2, ah_y - 8);
        ctx.stroke();
        
        // Label 'ω' (omega)
        ctx.fillText('\u03C9', omega_x, c_y + omega_r + 15);

        // --- Draw Caption ---
        ctx.font = 'bold 22px serif';
        ctx.fillText('Fig. 2.14', canvas.width / 2, 320);
    </script>
</body>
</html>